<template>
	<!-- 我的挂号 -->
	<view class="common-content">
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="true" :is-back="false" height="88">
			<view class="common-tabs-box">
				<view class="slot-wrap">
					<view class="slot-wrap-left" @tap="back">
						<u-icon name="arrow-left"></u-icon>
					</view>
					<view class="slot-wrap-title">我的挂号</view>
				</view>
				<u-tabs-swiper activeColor="#F4333C" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
		</u-navbar>
		<!-- <view class="common-tabs-box">
			<u-tabs-swiper activeColor="#F4333C" ref="tabs" :list="list" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view> -->
		<view class="common-content-box container">
			<view class="register-card" v-for="(item,index) in dataList" :key="index">
				<view class="register-card-top">
					<view class="left-right">
						<view class="left">
							姓名： {{item.userVisitCard ? item.userVisitCard.username : '--'}}
						</view>
						<!-- status 0待付款 1待会诊 2会诊中 3已完成 4用户取消 5过号 6专家取消   -->
						<view :class="{'isSuccess' : item.status == 1}">
							{{ item.status == 0 ? '待付款' : item.status == 1 ?'待会诊' : item.status == 2 ?'会诊中' : item.status == 3 ?'已就诊' : item.status == 4 ?'用户取消' : item.status == 5 ?'过号' :'专家取消'}}
						</view>
					</view>
					<view class="">
						性别： {{ item.userVisitCard ? item.userVisitCard.sex == 1 ? '男' : '女' :'男'}}
					</view>
					<view class="">
						年龄：
						{{item.userVisitCard ? item.userVisitCard.birthday ? filterAge(item.userVisitCard.birthday) : '--' : '--'}}
					</view>
					<view class="">
						预约时间： {{ item.timeSlot || '--'}}
					</view>
				</view>
				<view class="page-box-card-bottom">
					<view class="left-right">
						<!-- <view class="left">
							退款中/已退款
						</view> -->
						<view class="right">
							<!-- <u-button shape="circle" :custom-style="buttonStyle" @click="toRegisterDetail(item)"
								hover-class="none">查看详情
							</u-button> -->
							<view :style="buttonStyle" @click="toRegisterDetail(item)">查看详情</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <u-gap height="94" bg-color="#f5f5f5"></u-gap> -->

		</view>
		<view class="footer-more">
			<view class="view-more" v-if="dataList.length > 0">
				{{ isMore ? "上滑查看更多" : "没有更多了" }}
			</view>
			<view class="view-more" v-if="dataList.length == 0">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	// import { filterAge } from '@/utils/filters.js';
	import {
		API
	} from "@/config/myApi.js";
	export default {
		data() {
			return {
				// tabs数据
				list: [{
					name: '今日挂号',
				}, {
					name: '预约挂号',
				}, {
					name: '历史挂号',
				}],
				current: 0,
				// button
				buttonStyle: {
					width: "auto",
					height: "62rpx",
					lineHeight: "62rpx",
					padding: "0 20rpx",
					color: "#F4333C",
					borderRadius: "31rpx",
					border: "1px solid #F4333C"
				},
				isMore: false,
				params: {
					expertId: this.$store.state.expertId,
					page: 1,
					rows: this.$store.state.rows,
					timeSlot: 0
				},
				rows: this.$store.state.rows,
				dataList: [],
			};
		},
		onLoad(options) {
			if (options.current) {
				this.current = options.current;
				this.params.timeSlot = options.current;
				this.getExpertRegister(this.params)
			} else {
				this.getExpertRegister(this.params)
			}
			// console.log('参数',this.params);
			// console.log(this.$store.state.expertId,this.$store.state.userInfo);
		},
		onReachBottom() {
			if (this.isMore) {
				this.params.page++;
				console.log('参数',this.params);
				this.addRandomData(this.params)
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			filterAge(birthday) {
				if (birthday) {
					let date = new Date;
					let year = date.getFullYear();
					let birth = birthday.slice(0, 4)
					let age = year - birth
					return age + '岁';
					// console.log(year,birth);
				} else {
					return '--';
				}
			},
			// 获取专家分时段获取挂号集合
			getExpertRegister(pram) {
				API.expertRegister(pram).then(res => {
					if (res.code == 200) {
						let result = res.result;
						// this.isMore = result.length > 0;
						// if(result.length > 0){
						this.dataList = result;
						// }
						if (result.length >= this.rows) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
						console.log(' 获取专家分时段获取挂号集合', result);
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// tabs切换
			change(index) {
				if (this.current != index) {
					this.current = index;
					this.params.page = 1;
					this.params.timeSlot = index;
					let pram = {
						...this.params,
						// timeSlot: index,
					}
					console.log('参数', pram);
					this.getExpertRegister(pram);
				}
			},
			// 加载更多
			addRandomData(pram) {
				API.expertRegister(pram).then(res => {
					let result = res.result;
					if (res.code == 200) {
						// this.isMore = result.length > 0;
							console.log('result',result);
						if (result.length != 0) {
							this.dataList = this.dataList.concat(result)
						}
						if (result.length >= this.rows) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
				console.log('结果', this.dataList);
			},
			toRegisterDetail(item) {
				uni.setStorageSync("expertItemDetail", item);
				uni.navigateTo({
					url: "/pages/mine/myRegister/registerDetail",
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	// 公共样式
	.left-right {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.left {
			flex: 1;
		}
	}

	// 主体
	// 挂号区域
	.register-card {
		margin-top: 24rpx;
		padding: 28rpx 24rpx 0;
		// width: 690rpx;
		width: 100%;
		// height: 373rpx;
		background: #FFFFFF;
		border-radius: 14rpx;

		&-top {
			// height: 224rpx;
			border-bottom: 1rpx solid #E3E3E3;

			>view {
				margin-bottom: 28rpx;
			}

			.isSuccess {
				color: #F4333C;
			}
		}
	}

	// 单个区域-公共样式
	.page-box-card-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 118rpx;
		padding: 30rpx 0;

	}
</style>
